<template>
  <view class="custom-tabs">
    <view v-for="(item, index) in list" :class="{ active: index == activeIndex }" class="custom-tabs-bar">
      <text @click="func(index)" class="tabbar-text">{{ item }}</text>
    </view>

    <!-- left width 都需要设置 单位 -->
    <view :style="{ left: left + 'px', width: width + 'px' }" class="custom-tabs-cursor"></view>
  </view>
</template>

<script setup lang="ts">
// lang='ts'内部就可以编写 ts
// 否则 泛型语法是不生效的

import { nextTick, onMounted, ref } from 'vue';

// 定义 props
const prop = defineProps<{
  list: string[];
  activeIndex: number;
}>();

// 定义 emit
const emit = defineEmits<{
  (e: 'activeChange', activeIndex: number): void;
}>();

const func = (index: number) => {
  emit('activeChange', index);
  // 要立刻更新 可以直接将 index 传递进去取值
  // const currentDom = domList.value[index];
  // // 设置给状态变量
  // left.value = currentDom.left;
  // width.value = currentDom.width;

  // 数据更新-到同步会 prop 是异步的要等待-自己写定时器 或者用 nextTick 等待更新完毕
  // setTimeout(() => {
  // nextTick 数据更新完毕之后执行
  nextTick(() => {
    // 点击之后 基于当前的索引 移动元素的位置
    // prop.activeIndex需要点击两次才会更新
    const currentDom = domList.value[prop.activeIndex];
    // // 设置给状态变量
    left.value = currentDom.left;
    width.value = currentDom.width;
  });

  // }, 1000);
};

//定义状态变量 动态的调整 位置 及宽度
const left = ref(20);
const width = ref(30);
//保存 节点信息
const domList = ref<UniApp.NodeInfo[]>([]);

onMounted(() => {
  //选择对象
  const query = uni.createSelectorQuery();
  query.selectAll('.tabbar-text').boundingClientRect((res) => {
    console.log(res);
    domList.value = res as UniApp.NodeInfo[];

    //设置默认的位置 及宽度
    //结合索引从数组中获取信息
    const currentDom = domList.value[prop.activeIndex];
    console.log(currentDom);
    //设置给状态变量
    left.value = currentDom.left;
    width.value = currentDom.width;
  });

  //执行查询
  query.exec();
});
</script>

<!-- 提供的样式 是 sass 的语法  需要设置 style 的 lang 标签 -->
<style lang="scss">
// 自定义tabbar
.custom-tabs {
  display: flex;
  position: relative;
  padding: 0 30rpx;
}

.custom-tabs-bar {
  height: 80rpx;
  line-height: 80rpx;
  color: #979797;
  padding-right: 30rpx;
  position: relative;

  // sass 的语法
  // &.active 解析为 .custom-tabs-bar.active
  // 某个元素 同时拥有custom-tabs-bar  active类名时 样式就会生效
  &.active {
    color: hotpink;
    font-weight: 500;
  }
}

.tabbar-text {
  font-size: 30rpx;
}
.custom-tabs-cursor {
  position: absolute;
  bottom: 3px;
  // 动态 改位置 left
  left: 300px;

  // 动态改宽度
  width: 100px;
  height: 2px;
  border-radius: 2px;
  background-color: #2cb5a5;
  transition: all 0.3s ease-out;
}
</style>
